import React, { Component } from 'react'
import {Carousel,Flex} from "antd-mobile"//
import "./index.css"
import axios from "../../utils/axios"
import { withRouter } from "react-router-dom";
import SearcbBar from "../searchbar/index"

 class index extends Component {
  state = {
       Carousel:[],     // 轮播图数据
       imgHeight: 170,  // 图片高度
       Navigation:[],   // 分类导航
       productData:[]   // 图片列表
   }

    // 轮播图点击事件
    HSwiperClick(goods_id){
        this.props.history.push("/goodetailed/" + goods_id)
    }
    
    // 分类导航点击事件
    HCIclick(){
        this.props.history.push("/product")
    }

    // 图片列表的点击事件
    handleImgClick = ()=>{
        this.props.history.push("/goodList/query='123'");
    }

    componentDidMount(){
        // axios请求轮播图数据
        axios.get("home/swiperdata").then((res) => {
          this.setState({
            Carousel: res,
          });
        })
        .catch((err) => console.log(err));
        // axios请求分类导航数据
        axios.get("/home/catitems").then((res) => {
            this.setState({
                Navigation: res,
            });
        })
        /* axios请求图片列表数据 */
        axios.get("/home/floordata").then(res=>{
            this.setState({
                productData:res
            })
        })
    }

    render() {
        return (
                 <div className="shop-index">
                     {/* 搜索框 */}
                    <SearcbBar></SearcbBar>

                    {/* 轮播图 */}
                    <div className="shop-index-swiper">
                        <Carousel autoplay={true} infinite>
                        {this.state.Carousel.map(val => (
                            <div
                            onClick={this.HSwiperClick.bind(this,val.goods_id)}
                            key={val.goods_id}
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                            <img
                                src={val.image_src}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                                }}
                            />
                            </div>
                        ))}
                        </Carousel>
                    </div>

                    {/* 分类导航 */}
                    <div className="shop-index-catitems">
                        <div className="catitems-item">
                            <Flex>
                                {this.state.Navigation.map( val => {
                                    return  <Flex.Item key={val.name} onClick={this.HCIclick.bind(this)}>
                                                <img src={val.image_src} alt=""/>
                                            </Flex.Item>
                                })}
                            </Flex>
                        </div>
                    </div>

                    {/* 列表图片 */}
                    <div className="shop-index-productData">
                        {
                            this.state.productData.map(v=>{
                                return <div key={v.floor_title.image_src} className="productData-item">
                                    {/* 标题开始 */}
                                    <div className="product-title">
                                        <img src={v.floor_title.image_src} alt=""/>
                                    </div>
                                    {/* 标题结束 */}
                                    {/* 图片列表的开始 */}
                                    <div className="product-image-list">
                                        {
                                            v.product_list.map(vv=>{
                                                return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                                    <img src={vv.image_src} alt=""/>
                                                </div>
                                            })
                                        }
                                    </div>
                                    {/* 图片列表的结束 */}

                                </div>
                            })
                        }
                    </div>


                 </div>
        )
    }
}

export default withRouter(index)
